<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理函数与事件冒泡</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        .box2 {
            width: 80px;
            height: 80px;
            background-color: red;
        }

        .box3 {
            width: 60px;
            height: 60px;
            background-color: black;
        }

        .box4 {
            width: 40px;
            height: 40px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="box1 box">
        <div class="box2 box">
            <div class="box3 box">
                <div class="box4 box"></div>
            </div>
        </div>
    </div>



    <script>
        //    事件是元素天生具有的特性
        // 我们所谓的绑定事件，是绑定事件处理函数 
        // 事件+事件的反馈 =前端交互 交互体验
        var oDiv = document.getElementsByTagName('div')[0];
        // 事件句柄
        // 事件源 事件作用在谁身上谁就是事件源
        // oDiv.onclick=function(){
        //     this.style.background='black'
        // }
        // 如何绑定事件处理函数
        // elem.onclick=function(){} 兼容性好，同一个元素的同一个事件只能绑定一个事件处理函数。绑定多个相同事件会覆盖掉
        // elem.addEventListener(事件类型，事件处理函数，false) 添加事件监听器  ie9一下不兼容，w3c规范。可以绑定多个事件处理函数
        // 同一个元素绑定相同的事件处理函数，只执行一次
        oDiv.addEventListener('click', function () {
            this.style.background = 'black';
        })
        oDiv.addEventListener('click', function () {
            this.style.width = '200px';
        })
        // elem.attachEvent(事件类型，事件处理函数) ie8及以下


        // 事件处理程序中的运行环境 this
        //this指向事件源

        // 事件绑定兼容方法
        function addEvent(el, type, fn) {
            if (el.addEventListener) {
                el.addEventListener(type, fn, false);
            } else if (el.attachEvent) {
                el.attachEvent('on' + type, function () {
                    fn.call(el);
                });
            } else {
                el['on' + type] = fn;
            }
        }
        //解除事件处理函数
        // element.onclick=null/false;
        // element.addEventListener('click',test,false)
        // element.removeEventListener('click',test,false)

        // 事件冒泡

        // 事件捕获

        // 先捕获后冒泡
        let box1 = document.getElementsByClassName('box1')[0];
        let box2 = document.getElementsByClassName('box2')[0];
        let box3 = document.getElementsByClassName('box3')[0];
        let box4 = document.getElementsByClassName('box4')[0];



        box1.addEventListener('click', function () {
            console.log("捕获box1");
        }, true)
        box2.addEventListener('click', function () {
            console.log("捕获box2");
        }, true)
        box3.addEventListener('click', function () {
            console.log("捕获box3");
        }, true)
        box4.addEventListener('click', function () {
            console.log("捕获box4");
        }, true)

        box1.addEventListener('click', function () {
            console.log("冒泡box1");
        })
        box2.addEventListener('click', function () {
            console.log("冒泡box2");
        })
        box3.addEventListener('click', function () {
            console.log("冒泡box3");
        })
        box4.addEventListener('click', function () {
            console.log("冒泡box4");
        })
        // ie浏览器没有捕获

        // 取消冒泡
        //w3c e.stopPropagation();
        //ie e.cancelBubble=true

        // 取消默认事件
        document.oncontextmenu = function (e) {
            // e.preventDefault(); w3c ie9不兼容
            // e.returnValue=false; ie9以下兼容
            return false
        }

    </script>
</body>

</html>